<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用说明</title>
    <link href="{{ url_for('static', filename='bootstrap.min.css') }}" rel="stylesheet">
    <link href="{{ url_for('static', filename='fontawesome.min.css') }}" rel="stylesheet">
    <link href="{{ url_for('static', filename='inter.css') }}" rel="stylesheet">
    <style>
        :root {
            --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            --success-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
            --warning-gradient: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
            --dark-gradient: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
            --shadow-light: 0 4px 6px rgba(0, 0, 0, 0.07);
            --shadow-medium: 0 8px 25px rgba(0, 0, 0, 0.1);
            --shadow-heavy: 0 15px 35px rgba(0, 0, 0, 0.1);
            --border-radius: 20px;
            --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        * {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
        }

        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
        }

        /* 导航栏样式 */
        .navbar {
            background: rgba(255, 255, 255, 0.95) !important;
            backdrop-filter: blur(10px);
            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
            box-shadow: var(--shadow-light);
        }

        .navbar-brand {
            font-weight: 700;
            font-size: 1.5rem;
            background: var(--primary-gradient);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .nav-link {
            font-weight: 500;
            transition: var(--transition);
            position: relative;
        }

        .nav-link:hover {
            transform: translateY(-2px);
        }

        /* 英雄区域样式 */
        .hero-section {
            background: var(--primary-gradient);
            color: white;
            padding: 4rem 0;
            margin-bottom: 3rem;
            position: relative;
            overflow: hidden;
        }

        .hero-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
            opacity: 0.3;
        }

        .hero-content {
            position: relative;
            z-index: 2;
        }

        .hero-title {
            font-weight: 800;
            font-size: 3.5rem;
            margin-bottom: 1.5rem;
            text-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        .hero-subtitle {
            font-size: 1.3rem;
            font-weight: 400;
            opacity: 0.9;
            margin-bottom: 2rem;
        }

        /* 卡片样式 */
        .card {
            border: none;
            border-radius: var(--border-radius);
            box-shadow: var(--shadow-light);
            transition: var(--transition);
            overflow: hidden;
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
            margin-bottom: 2rem;
        }

        .card:hover {
            transform: translateY(-8px);
            box-shadow: var(--shadow-heavy);
        }

        .card-header {
            background: var(--primary-gradient);
            color: white;
            border: none;
            padding: 1.5rem;
            font-weight: 600;
        }

        .card-body {
            padding: 2rem;
        }

        /* 特性卡片样式 */
        .feature-card {
            border: none;
            border-radius: var(--border-radius);
            box-shadow: var(--shadow-light);
            transition: var(--transition);
            overflow: hidden;
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
            height: 100%;
        }

        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-heavy);
        }

        .feature-icon {
            font-size: 3rem;
            margin-bottom: 1.5rem;
            opacity: 0.8;
        }

        /* 步骤样式 */
        .step-number {
            background: var(--primary-gradient);
            color: white;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 1.2rem;
            margin-right: 1.5rem;
            box-shadow: var(--shadow-medium);
        }

        .step-item {
            display: flex;
            align-items: center;
            padding: 2rem;
            background: rgba(255, 255, 255, 0.8);
            border-radius: var(--border-radius);
            margin-bottom: 1.5rem;
            transition: var(--transition);
            backdrop-filter: blur(10px);
        }

        .step-item:hover {
            transform: translateX(10px);
            background: rgba(255, 255, 255, 0.95);
        }

        .step-content h5 {
            color: #2c3e50;
            margin-bottom: 0.5rem;
            font-weight: 600;
        }

        .step-content p {
            color: #6c757d;
            margin-bottom: 0;
            line-height: 1.6;
        }

        /* 参数卡片样式 */
        .param-card {
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            border-radius: var(--border-radius);
            padding: 1.5rem;
            border: 2px solid transparent;
            transition: var(--transition);
            height: 100%;
        }

        .param-card:hover {
            border-color: #667eea;
            background: linear-gradient(135deg, #f0f4ff 0%, #e6f0ff 100%);
            transform: translateY(-3px);
        }

        .param-header {
            background: var(--primary-gradient);
            color: white;
            border-radius: 15px;
            padding: 1rem;
            margin-bottom: 1rem;
            font-weight: 600;
        }

        /* 模型对比样式 */
        .model-comparison {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 2rem;
            margin-bottom: 2rem;
        }

        .model-card {
            background: rgba(255, 255, 255, 0.9);
            border-radius: var(--border-radius);
            padding: 2rem;
            border: 3px solid transparent;
            transition: var(--transition);
            backdrop-filter: blur(10px);
        }

        .model-card.success {
            border-color: #28a745;
        }

        .model-card.warning {
            border-color: #ffc107;
        }

        .model-card.success .model-header {
            background: var(--success-gradient);
        }

        .model-card.warning .model-header {
            background: var(--warning-gradient);
        }

        .model-header {
            color: white;
            border-radius: 15px;
            padding: 1rem;
            margin-bottom: 1.5rem;
            font-weight: 600;
            text-align: center;
        }

        .model-features {
            list-style: none;
            padding: 0;
        }

        .model-features li {
            padding: 0.5rem 0;
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        }

        .model-features li:last-child {
            border-bottom: none;
        }

        .model-features li i {
            margin-right: 0.5rem;
            width: 20px;
        }

        /* 警告样式 */
        .alert {
            border-radius: var(--border-radius);
            border: none;
            padding: 1.5rem;
            font-weight: 500;
        }

        /* 页脚样式 */
        footer {
            background: var(--dark-gradient);
            color: white;
            padding: 2rem 0;
            margin-top: 4rem;
        }

        /* 动画效果 */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .fade-in-up {
            animation: fadeInUp 0.6s ease-out;
        }

        .fade-in-up-delay-1 {
            animation: fadeInUp 0.6s ease-out 0.1s both;
        }

        .fade-in-up-delay-2 {
            animation: fadeInUp 0.6s ease-out 0.2s both;
        }

        .fade-in-up-delay-3 {
            animation: fadeInUp 0.6s ease-out 0.3s both;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .hero-title {
                font-size: 2.5rem;
            }
            
            .model-comparison {
                grid-template-columns: 1fr;
            }
            
            .step-item {
                flex-direction: column;
                text-align: center;
            }
            
            .step-number {
                margin-right: 0;
                margin-bottom: 1rem;
            }
            
            .card-body {
                padding: 1.5rem;
            }
        }

        /* 滚动指示器 */
        .scroll-indicator {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background: rgba(102, 126, 234, 0.2);
            z-index: 1000;
        }

        .scroll-progress {
            height: 100%;
            background: var(--primary-gradient);
            width: 0%;
            transition: width 0.3s ease;
        }
    </style>
</head>
<body>
    <!-- 滚动指示器 -->
    <div class="scroll-indicator">
        <div class="scroll-progress" id="scrollProgress"></div>
    </div>

    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-light fixed-top">
        <div class="container">
            <a class="navbar-brand" href="{{ url_for('index') }}">
                <i class="fas fa-chart-line me-2"></i>AI库存预测
            </a>
            <div class="navbar-nav ms-auto">
                <a class="nav-link" href="{{ url_for('index') }}">
                    <i class="fas fa-home me-1"></i>返回主页
                </a>
            </div>
        </div>
    </nav>

    <!-- 英雄区域 -->
    <div class="hero-section">
        <div class="container hero-content text-center">
            <h1 class="hero-title fade-in-up">
                <i class="fas fa-book me-3"></i>使用说明
            </h1>
            <p class="hero-subtitle fade-in-up-delay-1">了解如何使用增强版商品库存预测系统</p>
        </div>
    </div>

    <div class="container" style="margin-top: 2rem;">
        <!-- 系统特性 -->
        <div class="row mb-5">
            <div class="col-12">
                <h2 class="mb-4 fade-in-up">
                    <i class="fas fa-star me-2"></i>系统特性
                </h2>
            </div>
            <div class="col-md-4 mb-4">
                <div class="feature-card fade-in-up-delay-1">
                    <div class="card-body text-center">
                        <div class="feature-icon text-primary">
                            <i class="fas fa-robot"></i>
                        </div>
                        <h5 class="card-title">商品级别预测</h5>
                        <p class="card-text">每个商品都有独立的AI模型，提供更精准的个性化预测</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class="feature-card fade-in-up-delay-2">
                    <div class="card-body text-center">
                        <div class="feature-icon text-success">
                            <i class="fas fa-chart-line"></i>
                        </div>
                        <h5 class="card-title">时间序列分析</h5>
                        <p class="card-text">基于Prophet算法的时间序列预测，捕捉销售趋势和季节性</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class="feature-card fade-in-up-delay-3">
                    <div class="card-body text-center">
                        <div class="feature-icon text-warning">
                            <i class="fas fa-cogs"></i>
                        </div>
                        <h5 class="card-title">智能库存优化</h5>
                        <p class="card-text">自动计算安全库存和补货建议，优化库存管理</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- 使用步骤 -->
        <div class="row mb-5">
            <div class="col-12">
                <h2 class="mb-4 fade-in-up">
                    <i class="fas fa-list-ol me-2"></i>使用步骤
                </h2>
            </div>
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        <div class="step-item fade-in-up-delay-1">
                            <div class="step-number">1</div>
                            <div class="step-content">
                                <h5>上传数据文件</h5>
                                <p>在首页上传包含商品销售数据的CSV或Excel文件。文件应包含商品ID、销售日期、销售数量等字段。</p>
                            </div>
                        </div>
                        <div class="step-item fade-in-up-delay-2">
                            <div class="step-number">2</div>
                            <div class="step-content">
                                <h5>查看商品列表</h5>
                                <p>系统会显示所有商品的基本信息。点击"分析"按钮进入特定商品的详细分析页面。</p>
                            </div>
                        </div>
                        <div class="step-item fade-in-up-delay-3">
                            <div class="step-number">3</div>
                            <div class="step-content">
                                <h5>设置预测参数</h5>
                                <p>在商品详情页面设置当前库存、预测天数、补货周期和安全系数等参数。</p>
                            </div>
                        </div>
                        <div class="step-item fade-in-up-delay-3">
                            <div class="step-number">4</div>
                            <div class="step-content">
                                <h5>获取预测结果</h5>
                                <p>点击"开始预测分析"按钮，系统将生成详细的预测报告和补货建议。</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 参数说明 -->
        <div class="row mb-5">
            <div class="col-12">
                <h2 class="mb-4 fade-in-up">
                    <i class="fas fa-cog me-2"></i>参数说明
                </h2>
            </div>
            <div class="col-md-6 mb-4">
                <div class="param-card fade-in-up-delay-1">
                    <div class="param-header">
                        <i class="fas fa-boxes me-2"></i>当前库存
                    </div>
                    <p>商品当前的库存数量。系统将基于此数量计算未来的库存变化。</p>
                </div>
            </div>
            <div class="col-md-6 mb-4">
                <div class="param-card fade-in-up-delay-2">
                    <div class="param-header">
                        <i class="fas fa-calendar me-2"></i>预测天数
                    </div>
                    <p>需要预测的未来天数。建议设置为30-90天，以获得较好的预测效果。</p>
                </div>
            </div>
            <div class="col-md-6 mb-4">
                <div class="param-card fade-in-up-delay-3">
                    <div class="param-header">
                        <i class="fas fa-clock me-2"></i>补货周期
                    </div>
                    <p>从下单到到货的天数。用于计算补货时机和库存缓冲。</p>
                </div>
            </div>
            <div class="col-md-6 mb-4">
                <div class="param-card fade-in-up-delay-3">
                    <div class="param-header">
                        <i class="fas fa-shield-alt me-2"></i>安全系数
                    </div>
                    <p>安全库存的倍数。值越大，安全库存越高，缺货风险越低，但库存成本也越高。</p>
                </div>
            </div>
        </div>

        <!-- 模型说明 -->
        <div class="row mb-5">
            <div class="col-12">
                <h2 class="mb-4 fade-in-up">
                    <i class="fas fa-brain me-2"></i>模型说明
                </h2>
            </div>
            <div class="col-12">
                <div class="model-comparison">
                    <div class="model-card success fade-in-up-delay-1">
                        <div class="model-header">
                            <i class="fas fa-robot me-2"></i>商品级别模型
                        </div>
                        <ul class="model-features">
                            <li><i class="fas fa-check text-success"></i>每个商品独立训练</li>
                            <li><i class="fas fa-check text-success"></i>更精准的个性化预测</li>
                            <li><i class="fas fa-check text-success"></i>捕捉商品特有模式</li>
                            <li><i class="fas fa-check text-success"></i>适合差异化商品</li>
        </ul>
                    </div>
                    <div class="model-card warning fade-in-up-delay-2">
                        <div class="model-header">
                            <i class="fas fa-chart-line me-2"></i>聚合模型
                        </div>
                        <ul class="model-features">
                            <li><i class="fas fa-check text-warning"></i>基于整体销售趋势</li>
                            <li><i class="fas fa-check text-warning"></i>适用于相似商品</li>
                            <li><i class="fas fa-check text-warning"></i>计算资源需求低</li>
                            <li><i class="fas fa-check text-warning"></i>作为备选方案</li>
            </ul>
                    </div>
                </div>
            </div>
        </div>

        <!-- 注意事项 -->
        <div class="row mb-5">
            <div class="col-12">
                <h2 class="mb-4 fade-in-up">
                    <i class="fas fa-exclamation-triangle me-2"></i>注意事项
                </h2>
                <div class="alert alert-info fade-in-up-delay-1">
                    <h5><i class="fas fa-info-circle me-2"></i>数据要求</h5>
                    <ul class="mb-0">
                        <li>确保数据包含足够的销售历史（建议至少3个月）</li>
                        <li>日期格式应统一，建议使用YYYY-MM-DD格式</li>
                        <li>商品ID应唯一且一致</li>
                        <li>销售数量应为非负数值</li>
                    </ul>
                </div>
                <div class="alert alert-warning fade-in-up-delay-2">
                    <h5><i class="fas fa-exclamation-triangle me-2"></i>预测限制</h5>
                    <ul class="mb-0">
                        <li>预测结果仅供参考，实际决策需结合业务情况</li>
                        <li>异常事件（如促销、节假日）可能影响预测准确性</li>
                        <li>新商品或销售数据不足的商品预测准确性较低</li>
                        <li>定期重新训练模型以保持准确性</li>
        </ul>
                </div>
            </div>
        </div>
    </div>

    <!-- 页脚 -->
    <footer class="text-center">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <h5><i class="fas fa-code me-2"></i>技术栈</h5>
                    <p class="mb-0">Python • Flask • Prophet • Bootstrap</p>
                </div>
                <div class="col-md-6">
                    <h5><i class="fas fa-chart-line me-2"></i>功能特性</h5>
                    <p class="mb-0">商品级别预测 • 智能库存优化 • 实时分析</p>
                </div>
            </div>
            <hr class="my-4" style="border-color: rgba(255,255,255,0.2);">
            <p class="mb-0">
                <i class="fas fa-heart me-1" style="color: #e74c3c;"></i>
                商品库存预测系统 | 基于机器学习的智能库存管理
            </p>
        </div>
    </footer>

    <script src="{{ url_for('static', filename='bootstrap.bundle.min.js') }}"></script>
    <script>
        // 添加滚动效果
        window.addEventListener('scroll', function() {
            const navbar = document.querySelector('.navbar');
            if (window.scrollY > 50) {
                navbar.style.background = 'rgba(255, 255, 255, 0.98)';
            } else {
                navbar.style.background = 'rgba(255, 255, 255, 0.95)';
            }

            // 更新滚动进度条
            const scrollTop = window.pageYOffset;
            const docHeight = document.body.offsetHeight - window.innerHeight;
            const scrollPercent = (scrollTop / docHeight) * 100;
            document.getElementById('scrollProgress').style.width = scrollPercent + '%';
        });

        // 平滑滚动到锚点
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                if (target) {
                    target.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                }
            });
        });
    </script>
</body>
</html> 